<template>
	<view class="content">
		<view class="avatar-box">
			<u-avatar :src="src" size="100"></u-avatar>
			<text class="name">{{name}}</text>
		</view>

		<u-cell-group>
			<u-cell icon="account-fill" title="资料修改" isLink url="/pages/info/info"></u-cell>
			<u-cell icon="lock-fill" title="密码修改" isLink url="/pages/password/password"> </u-cell>
			<u-cell icon="chat-fill" title="留言" isLink url="/pages/message/message"> </u-cell>
		</u-cell-group>

		<u-button type="primary" shape="circle" text="退出登录" @click="logout" class="btn"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: uni.getStorageSync('user').headImg,
				name: uni.getStorageSync('user').name,
			}
		},
		onShow() {
			this.src = uni.getStorageSync('user').headImg
			this.name = uni.getStorageSync('user').name
		},
		methods: {
			logout() {
				uni.removeStorageSync('user')
				uni.removeStorageSync('userinfo')
				uni.removeStorageSync('token')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: $u-info-light;
		min-height: 88vh;
		overflow: hidden;

		.avatar-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx 0;
			background-color: #fff;

			.name {
				font-weight: bold;
				font-size: 38rpx;
				margin-top: 20rpx;
			}
		}

		.u-cell-group {
			background-color: #fff;
		}
		
		.btn{
			width: 90%;
			margin-top: 100rpx;
		}
	}
</style>